<template>
  <div>
    <el-input
      v-model="val"
      type="text"
      :class="{'require':getRequire && isNull(), 'item': true}"
      size="small"
      placeholder="请输入内容"
      :disabled="disabled"
      show-word-limit
      :clearable="true"
      @input="input"
      @focus="togglePopover"
    />
    <!-- 开窗区域 -->
    <el-dialog
      :visible.sync="visible"
      placement="bottom"
      width="800"
      class="ik-el-popover-warp"
    >
      <el-input
        v-model="val"
        type="text"
        :class="{'require':getRequire && isNull(), 'item': true}"
        size="small"
        placeholder="请输入内容"
        :disabled="disabled"
        show-word-limit
        :clearable="true"
        @input="input"
        @focus="togglePopover"
      />
      <!-- 数据表 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        @row-click="rowClick"
      >
        <template v-for="(item,index) in filedList">
          <table-select-item
            v-if="item.type==='select'"
            :key="index"
            :code="item.code"
            key-field="key"
            value-field="value"
            :name="item.name"
            :options="item.config.options"
            width="120"
            :edit="false"
          />
          <el-table-column
            v-else
            :key="index"
            :property="item.code"
            :label="item.name"
            v-bind="item.config"
          />
        </template>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        layout="total, prev, pager, next"
        :page-count="pagination.pageCount"
        :page-size="pagination.pageSize"
        :total="pagination.totalCount"
        @current-change="currentChange"
        @prev-click="prevClick"
        @next-click="nextClick"
      />
    </el-dialog>
  </div>
</template>

<script>
import { verify } from '@/utils/ik/verify/verify.js'
import { findPopup } from '@/api/ik/data/dataApi'

export default {
  name: 'IkTableText',
  model: {
    // 属性
    prop: 'value',
    // 事件
    event: 'input'
  },
  props: {
    // 获取数据的地址
    url: {
      type: String,
      default: ''
    },
    // 显示的字段列表
    filedList: {
      type: Array,
      default: function() {
        return [
          { code: 'id', name: 'ID' },
          { code: 'code', name: '编码' },
          { code: 'name', name: '名称' }
        ]
      }
    },
    // 查询键
    searchKey: {
      type: String,
      default: 'name'
    },
    // 查询键
    searcher: {
      type: Object,
      default: function() {
        return {}
      }
    },
    // 是否分页
    pageSign: {
      type: Boolean,
      default: true
    },
    // ===== 以下为组件信息 =====
    code: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    line: {
      type: Number,
      default: 0
    },
    value: {
      type: String,
      default: ''
    },
    edit: {
      type: Boolean,
      default: true
    },
    defaultValue: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    require: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array,
      default: function() {
        return []
      }
    },
    filter: {
      type: Function,
      default: function(val) {
        return val
      }
    }
  },
  data() {
    return {
      val: '',
      errorSign: false,
      message: '',
      // 是否显示分页数据
      visible: false,
      // 表格加载标识
      loading: false,
      tableData: [],
      pagination: {
        totalCount: 0,
        pageNo: 1,
        pageSize: 5,
        pageCount: 1
      }
    }
  },
  computed: {
    getRequire() {
      return this.require
    }
  },
  watch: {
    // 取值监听
    value: {
      handler(value, oldValue) {
        if (value !== null || value !== '' || this.val === undefined) {
          this.val = value
        } else {
          this.val = this.defaultValue
        }
        this.input(this.val)
      },
      immediate: true
    }
  },
  methods: {
    input(value) {
      // 取值验证
      this.message = verify(value, this.rules)
      this.errorSign = this.message !== null
      // 空值验证
      if (this.getRequire && this.isNull()) {
        this.errorSign = true
        this.message = "必填项，不可为空"
      }
      this.find()
      this.$emit('onFieldChange', this.code, '', value, this.errorSign, this.message)
      // v-model实现触发方法
      this.$emit('input', value)
    },
    isNull() {
      return this.val === '' || this.val === null || this.val === undefined
    },
    reset() {
      this.value = this.defaultValue
    },
    clean() {
      this.value = ''
    },
    // 显示数据区
    togglePopover() {
      // 加载数据
      this.val = ""
      this.input("")
      this.pagination.pageNo = 1
      this.find()
      this.visible = true
    },
    closepop() {
      this.visible = false
    },
    // 查询数据
    find() {
      const $this = this
      $this.loading = true
      $this.searcher[this.searchKey] = this.val
      // 获取树组件数据
      findPopup($this.url, $this.searcher, $this.pageSign, $this.pagination.pageSize, $this.pagination.pageNo).then(response => {
        // 设置表格数据
        $this.tableData = response.data.list
        // 设置分页器
        $this.pagination.totalCount = response.data.totalCount
        // 设置加载完成
        $this.loading = false
      })
    },
    // 行点击事件，用于回传数据
    rowClick(row) {
      this.visible = false
      this.$emit('onPopupClick', this.line, this.code, row)
    },
    // 当前页改变
    currentChange(val) {
      this.pagination.pageNo = val
      this.find()
    },
    // 上一页
    prevClick(val) {
      this.pagination.pageNo = val
      this.find()
    },
    // 下一页
    nextClick(val) {
      this.pagination.pageNo = val
      this.find()
    }
  }
}
</script>
<style scoped>
::v-deep.require > .el-input__inner {
  border: red 1px solid;
}

.item {
  width: calc(100% - 30px)
}
</style>
<style lang="scss">
.el-form-item {
  margin-bottom: 12px;
  width: 100%;
}

.el-form-item__label {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-form-item__content {
  width: calc(100% - 180px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
